<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 日历</title>
    <meta name="keywords" content="艺博客，装点生活">
    <meta name="description" content="艺博客为书画爱好者提供服务平台">

    <link rel="shortcut icon" href="http://www.zi-han.net/theme/hplus/favicon.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">

    <link href="css/custom.css" rel="stylesheet">
<link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico" type="text/css" />
    <link href="css/fullcalendar.css" rel="stylesheet">
    <link href="css/fullcalendar_002.css" rel="stylesheet">

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row animated fadeInDown">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Draggable Events</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="http://www.zi-han.net/theme/hplus/calendar.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="http://www.zi-han.net/theme/hplus/calendar.html#">选项1</a>
                            </li>
                            <li>
                                <a href="http://www.zi-han.net/theme/hplus/calendar.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="external-events">
                        <p>可拖动的活动</p>
                        <div class="external-event navy-bg ui-draggable" style="position: relative;">确定活动目标</div>
                        <div class="external-event navy-bg ui-draggable" style="position: relative;">各部门职责及分工</div>
                        <div class="external-event navy-bg ui-draggable" style="position: relative;">案例分享</div>
                        <div class="external-event navy-bg ui-draggable" style="position: relative;">xxx</div>
                        <p class="m-t">
                            <div class="icheckbox_square-green checked" style="position: relative;"><input id="drop-remove" class="i-checks" checked="checked" style="position: absolute; opacity: 0;" type="checkbox"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div>
                            <label for="drop-remove">移动后删除</label>
                        </p>
                    </div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <h2>FullCalendar</h2> 这是一个jQuery插件，它提供了全尺寸，可拖动，使用Ajax的操作方式，并且可以使用自己的feed格式，如谷歌日历。
                    <p>
                        <a href="http://arshaw.com/fullcalendar/" target="_blank">FullCalendar开发文档</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>FullCalendar示例 </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="http://www.zi-han.net/theme/hplus/calendar.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="http://www.zi-han.net/theme/hplus/calendar.html#">选项1</a>
                            </li>
                            <li>
                                <a href="http://www.zi-han.net/theme/hplus/calendar.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="calendar" class="fc fc-ltr"><table class="fc-header" style="width:100%"><tbody><tr><td class="fc-header-left"><span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on" style="-moz-user-select: none;"><span class="fc-text-arrow">‹</span></span><span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on" style="-moz-user-select: none;"><span class="fc-text-arrow">›</span></span></td><td class="fc-header-center"><span class="fc-header-title"><h2>一月 2018</h2></span></td><td class="fc-header-right"><span class="fc-button fc-button-month fc-state-default fc-corner-left fc-state-active" unselectable="on" style="-moz-user-select: none;">月</span><span class="fc-button fc-button-agendaWeek fc-state-default" unselectable="on" style="-moz-user-select: none;">周</span><span class="fc-button fc-button-agendaDay fc-state-default fc-corner-right" unselectable="on" style="-moz-user-select: none;">天</span></td></tr></tbody></table><div class="fc-content" style="position: relative;"><div class="fc-view fc-view-month fc-grid" style="position: relative; -moz-user-select: none;" unselectable="on"><div class="fc-event-container" style="position:absolute;z-index:8;top:0;left:0"><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 99px; width: 91px; top: 68.1333px;"><div class="fc-event-inner"><span class="fc-event-title">日事件</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 99px; width: 379px; top: 41.1333px;"><div class="fc-event-inner"><span class="fc-event-title">长事件</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 291px; width: 91px; top: 68.1333px;"><div class="fc-event-inner"><span class="fc-event-time">4p</span><span class="fc-event-title">重复事件</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 291px; width: 91px; top: 122.133px;"><div class="fc-event-inner"><span class="fc-event-time">4p</span><span class="fc-event-title">重复事件</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 579px; width: 82px; top: 41.1333px;"><div class="fc-event-inner"><span class="fc-event-time">10:30a</span><span class="fc-event-title">会议</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 579px; width: 82px; top: 68.1333px;"><div class="fc-event-inner"><span class="fc-event-time">12p</span><span class="fc-event-title">午餐</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 3px; width: 91px; top: 122.133px;"><div class="fc-event-inner"><span class="fc-event-time">7p</span><span class="fc-event-title">生日</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><a href="http://baidu.com/" class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 3px; width: 187px; top: 362.133px;"><div class="fc-event-inner"><span class="fc-event-title">打开百度</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></a></div><table class="fc-border-separate" style="width:100%" cellspacing="0"><thead><tr class="fc-first fc-last"><th class="fc-day-header fc-日 fc-widget-header fc-first" style="width: 96px;">日</th><th class="fc-day-header fc-一 fc-widget-header" style="width: 96px;">一</th><th class="fc-day-header fc-二 fc-widget-header" style="width: 96px;">二</th><th class="fc-day-header fc-三 fc-widget-header" style="width: 96px;">三</th><th class="fc-day-header fc-四 fc-widget-header" style="width: 96px;">四</th><th class="fc-day-header fc-五 fc-widget-header" style="width: 96px;">五</th><th class="fc-day-header fc-六 fc-widget-header fc-last">六</th></tr></thead><tbody><tr class="fc-week fc-first"><td class="fc-day fc-日 fc-widget-content fc-other-month fc-past fc-first" data-date="2017-12-31"><div style="min-height: 80px;"><div class="fc-day-number">31</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td><td class="fc-day fc-一 fc-widget-content fc-past" data-date="2018-01-01"><div><div class="fc-day-number">1</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td><td class="fc-day fc-二 fc-widget-content fc-past" data-date="2018-01-02"><div><div class="fc-day-number">2</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td><td class="fc-day fc-三 fc-widget-content fc-past" data-date="2018-01-03"><div><div class="fc-day-number">3</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td><td class="fc-day fc-四 fc-widget-content fc-past" data-date="2018-01-04"><div><div class="fc-day-number">4</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td><td class="fc-day fc-五 fc-widget-content fc-past" data-date="2018-01-05"><div><div class="fc-day-number">5</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td><td class="fc-day fc-六 fc-widget-content fc-today fc-state-highlight fc-last" data-date="2018-01-06"><div><div class="fc-day-number">6</div><div class="fc-day-content"><div style="position: relative; height: 54px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-日 fc-widget-content fc-future fc-first" data-date="2018-01-07"><div style="min-height: 79px;"><div class="fc-day-number">7</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-一 fc-widget-content fc-future" data-date="2018-01-08"><div><div class="fc-day-number">8</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-二 fc-widget-content fc-future" data-date="2018-01-09"><div><div class="fc-day-number">9</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-三 fc-widget-content fc-future" data-date="2018-01-10"><div><div class="fc-day-number">10</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-四 fc-widget-content fc-future" data-date="2018-01-11"><div><div class="fc-day-number">11</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-五 fc-widget-content fc-future" data-date="2018-01-12"><div><div class="fc-day-number">12</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-六 fc-widget-content fc-future fc-last" data-date="2018-01-13"><div><div class="fc-day-number">13</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-日 fc-widget-content fc-future fc-first" data-date="2018-01-14"><div style="min-height: 79px;"><div class="fc-day-number">14</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-一 fc-widget-content fc-future" data-date="2018-01-15"><div><div class="fc-day-number">15</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-二 fc-widget-content fc-future" data-date="2018-01-16"><div><div class="fc-day-number">16</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-三 fc-widget-content fc-future" data-date="2018-01-17"><div><div class="fc-day-number">17</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-四 fc-widget-content fc-future" data-date="2018-01-18"><div><div class="fc-day-number">18</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-五 fc-widget-content fc-future" data-date="2018-01-19"><div><div class="fc-day-number">19</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-六 fc-widget-content fc-future fc-last" data-date="2018-01-20"><div><div class="fc-day-number">20</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-日 fc-widget-content fc-future fc-first" data-date="2018-01-21"><div style="min-height: 79px;"><div class="fc-day-number">21</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-一 fc-widget-content fc-future" data-date="2018-01-22"><div><div class="fc-day-number">22</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-二 fc-widget-content fc-future" data-date="2018-01-23"><div><div class="fc-day-number">23</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-三 fc-widget-content fc-future" data-date="2018-01-24"><div><div class="fc-day-number">24</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-四 fc-widget-content fc-future" data-date="2018-01-25"><div><div class="fc-day-number">25</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-五 fc-widget-content fc-future" data-date="2018-01-26"><div><div class="fc-day-number">26</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-六 fc-widget-content fc-future fc-last" data-date="2018-01-27"><div><div class="fc-day-number">27</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-日 fc-widget-content fc-future fc-first" data-date="2018-01-28"><div style="min-height: 79px;"><div class="fc-day-number">28</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-一 fc-widget-content fc-future" data-date="2018-01-29"><div><div class="fc-day-number">29</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-二 fc-widget-content fc-future" data-date="2018-01-30"><div><div class="fc-day-number">30</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-三 fc-widget-content fc-future" data-date="2018-01-31"><div><div class="fc-day-number">31</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-四 fc-widget-content fc-other-month fc-future" data-date="2018-02-01"><div><div class="fc-day-number">1</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-五 fc-widget-content fc-other-month fc-future" data-date="2018-02-02"><div><div class="fc-day-number">2</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td><td class="fc-day fc-六 fc-widget-content fc-other-month fc-future fc-last" data-date="2018-02-03"><div><div class="fc-day-number">3</div><div class="fc-day-content"><div style="position: relative; height: 27px;">&nbsp;</div></div></div></td></tr><tr class="fc-week fc-last"><td class="fc-day fc-日 fc-widget-content fc-other-month fc-future fc-first" data-date="2018-02-04"><div style="min-height: 78px;"><div class="fc-day-number">4</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-一 fc-widget-content fc-other-month fc-future" data-date="2018-02-05"><div><div class="fc-day-number">5</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-二 fc-widget-content fc-other-month fc-future" data-date="2018-02-06"><div><div class="fc-day-number">6</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-三 fc-widget-content fc-other-month fc-future" data-date="2018-02-07"><div><div class="fc-day-number">7</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-四 fc-widget-content fc-other-month fc-future" data-date="2018-02-08"><div><div class="fc-day-number">8</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-五 fc-widget-content fc-other-month fc-future" data-date="2018-02-09"><div><div class="fc-day-number">9</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-六 fc-widget-content fc-other-month fc-future fc-last" data-date="2018-02-10"><div><div class="fc-day-number">10</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td></tr></tbody></table></div></div></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/content.js"></script><div class="gohome"><a class="animated bounceInUp" href="http://www.zi-han.net/theme/hplus/index.html?v=4.1.0" title="返回首页"><i class="fa fa-home"></i></a></div>
<script src="js/jquery-ui.js"></script>
<script src="js/icheck.js"></script>
<script src="js/fullcalendar.js"></script>
<script>
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",});
        $("#external-events div.external-event").each(function () {
            var d = {title: $.trim($(this).text())};
            $(this).data("eventObject", d);
            $(this).draggable({zIndex: 999, revert: true, revertDuration: 0})
        });
        var b = new Date();
        var c = b.getDate();
        var a = b.getMonth();
        var e = b.getFullYear();
        $("#calendar").fullCalendar({
            header: {left: "prev,next", center: "title", right: "month,agendaWeek,agendaDay"},
            editable: true,
            droppable: true,
            drop: function (g, h) {
                var f = $(this).data("eventObject");
                var d = $.extend({}, f);
                d.start = g;
                d.allDay = h;
                $("#calendar").fullCalendar("renderEvent", d, true);
                if ($("#drop-remove").is(":checked")) {
                    $(this).remove()
                }
            },
            events: [{title: "日事件", start: new Date(e, a, 1)}, {
                title: "长事件",
                start: new Date(e, a, c - 5),
                end: new Date(e, a, c - 2),
            }, {id: 999, title: "重复事件", start: new Date(e, a, c - 3, 16, 0), allDay: false,}, {
                id: 999,
                title: "重复事件",
                start: new Date(e, a, c + 4, 16, 0),
                allDay: false
            }, {title: "会议", start: new Date(e, a, c, 10, 30), allDay: false}, {
                title: "午餐",
                start: new Date(e, a, c, 12, 0),
                end: new Date(e, a, c, 14, 0),
                allDay: false
            }, {
                title: "生日",
                start: new Date(e, a, c + 1, 19, 0),
                end: new Date(e, a, c + 1, 22, 30),
                allDay: false
            }, {title: "打开百度", start: new Date(e, a, 28), end: new Date(e, a, 29), url: "http://baidu.com/"}],
        })
    });
</script>




</body></html>